<template>
	<view class="bus" style="height:100vh;">
		<view class="head">
			<h3 style="padding-left: 5vw;">推荐商家</h3>
			<view class="avatar-container">
				<view class="tuijian">
					<img src="@/static/images/business/002.jpg" alt="Avatar 1">
					<p>爱宠之家</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">北京</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/business/003.jpg" alt="Avatar 2">
					<p>小狗之家</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">上海</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/business/004.jpg" alt="Avatar 3">
					<p>小猫之家</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">天津</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/business/005.jpg" alt="Avatar 4">
					<p>咪咪猫舍</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">南京</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/business/006.jpg" alt="Avatar 5">
					<p>汪星球</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">上海</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/business/007.jpg" alt="Avatar 6">
					<p>喵喵小家</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">南昌</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/pet/logo01.png" alt="Avatar 7">
					<p>猫狗之家</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">深圳</p>
					</view>
				</view>
				<view class="tuijian">
					<img src="@/static/images/pet/logo01.png" alt="Avatar 8">
					<p>猫和老鼠</p>
					<view style="display: flex;justify-content: center;">
						<p style="color: #999; font-size: 12px; margin-right: 5px;">长沙</p>
					</view>
				</view>
			</view>

		</view>

		<view class="un-head">
			<view class="container">
				<h3 style="padding-left: 5vw;">热门地区</h3>
				<navigator url="/subpages/space/space">
					<view style="padding-right: 5vw;">更多地方</view>
				</navigator>
				<!-- <view class="more" @click="goCurrent()">更多地区</view> -->
			</view>



			<view class="avatar-container2">

				<button class="spaceBtn" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">全国</view>
				</button>
				<button class="spaceBtn" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">北京</view>
				</button>
				<button class="spaceBtn" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">广州</view>
				</button>
				<button class="spaceBtn" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">天津</view>
				</button>
				<button class="spaceBtn" size="default" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">沈阳</view>
				</button>
				<button class="spaceBtn" size="default" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">上海</view>
				</button>
				<button class="spaceBtn" size="default" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">杭州</view>
				</button>
				<button class="spaceBtn" size="default" type="default" style="color:#ffffff;borderColor:#1AAD19"
					hover-class="is-hover">
					<view style="font-size: 5px;color:black">济南</view>
				</button>

				<!-- <view class="avatar-son">
							<button size="mini" type="default" 
			   	              style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" 
			   	              hover-class="is-hover">按钮</button>
						</view>
						<view class="avatar-son">11</view>
						<view class="avatar-son">11</view>
						<view class="avatar-son">11</view>
						<view class="avatar-son">11</view>
						<view class="avatar-son">11</view>
						<view class="avatar-son">11</view>
						<view class="avatar-son">11</view> -->
			</view>


			<!-- <view class="avatar-container">
		        <button type="default" 
		          style="color:pink;backgroundColor:white;borderColor:#1AAD19" 
		          >按钮 1</button>
		        <button type="default" 
		          style="color:pink;backgroundColor:white;borderColor:#1AAD19" 
		         >按钮 2</button>
		        <button type="default" 
		          style="color:pink;backgroundColor:white;borderColor:#1AAD19" 
		         >按钮 3</button>
		        <button type="default" 
		          style="color:pink;backgroundColor:white;borderColor:#1AAD19" 
		          >按钮 4</button>
		      </view> -->
			<!-- Tab 选项卡 -->
			<!-- <view class="tabs-box">
				<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">
					平台优选
				</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">
					交易最多
				</view>
				<view class="one-nav" :class="currentSwiperIndex === 2 ? 'nav-actived' : '' " @tap="swiperChange(2)">
					星级最高
				</view>
				<view class="one-nav" :class="currentSwiperIndex === 3 ? 'nav-actived' : '' " @tap="swiperChange(3)">
					宠物最多
				</view>
			</view> -->
			<view class="avatar-container3">
				<view v-for="(item, index) in sellers" :key="index" style="display: flex; align-items: center;" @click="goToDetail(item.sellerID)">
					<image :src="item.logo"
						style="width: 80px; height: 80px; margin: 10px; border-radius: 50%;"></image>
					<view>
						<view>
							<h3>{{item.sellerName}}</h3>
						</view>
						<view style="display: flex;">
							<p style="color: #999; font-size: 12px; margin-right: 5px;">市</p>
							<p style="color: #999; font-size: 12px;">区</p>
						</view>
						<view style="font-size: 10px;"> <text>在售<text style="color: orange;">382</text>只
								|
								好评<text style="color: orange;">120</text>条 | 等级<text
									style="color: orange;">5</text>星</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import waterfall from '../../components/waterFall/waterFall.vue';
	import service from '../../utils/request.js';
	export default {
		data() {
			return {
				// 当前 推荐 资讯 滑动位置
				currentSwiperIndex: 0,
				// 滑动页面轮播器的高度
				swiperSliderHeight: '500px',
				swiperSliderFeedsHeight: 0,
				swiperSliderNewsHeight: 0,
				// 记录滚动所在的位置
				oldFeedsScrollTop: 0,
				oldNewsScrollTop: 0,
				sellers: []
			}

		},
		mounted() {
			this.getAllSellersData();
		},
		methods: {
			//记住当前位置
			onPageScroll(event) {
				if (this.currentSwiperIndex === 0) {
					this.oldFeedsScrollTop = event.scrollTop
				} else {
					this.oldNewsScrollTop = event.scrollTop
				}
				if (event.scrollTop > 220) {
					this.navBarShowTag = true
				} else {
					this.navBarShowTag = false
				}
			},

			// 页面滑动左右分页的时候实现的效果
			swiperSlider(event) {
				if (event.detail.current === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = event.detail.current
			},
			// 点击按钮实现切换效果
			swiperChange(index) {
				if (index === 0) {
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					this.swiperSliderHeight = this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = index
			},
			async getAllSellersData() {
				try {
					const response = await service.get('/seller/listAll');
					this.sellers = response.data;
					console.log('获取的数据:', response);
				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
			//详情
			goToDetail(sellerID) {
				uni.setStorageSync('sellerID', sellerID)
				uni.navigateTo({
					url: '/pages/seller/seller?sellerID=${sellerID}'
				});
			},
			//获取位置
			goCurrent() {

			}

		},
	}
</script>
<style lang="scss" scoped>
	@use "business";
</style>